<template>
	<div ref="wrapper" class="wrapper">
		<div class="content">
			<div class="city-area">
				<div class="city-area-h2">热门城市</div>
				<div class="hotcitylist">
					<ul v-for="item in listAreas" :key="item.id">
						<li class="hotcitylist-ul-li" @click="cityClick(item.address)">{{item.address}}</li>
					</ul>
				</div>			
			</div>
			
			<div class="city-area">
				<div class="city-area-h2">字母排序</div>
				<div class="hotcitylist">
					<ul v-for="(item,index) in alphabet" :key="index">
						<li class="hotcitynumsort-content" @click="getVaule" :litter="item">
							<a>{{item}}</a>
						</li>
					</ul>
				</div>			
			</div>
			
			<!-- 遍历以字母开头的城市 -->
			<div class="city-area" v-for="items of data" :key="items.idx">
				<div class="city-area-h2" :ref="items.idx">{{items.idx}}</div>
				<div class="hotcitylist">
					<ul v-for="item of items.cities" :key="item.id">
						<li class="hotcitynumsort" @click="cityClick(item.name)">{{item.name}}</li>
					</ul>
				</div>			
			</div>				
		</div>
	</div>
</template>

<script>
	import Bscroll from 'better-scroll'
	export default{
		name:"CityList",
		data:function(){
			return{
				touchnum:""
			}
		},
		props:{
			data:Array,
			alphabet:Array,
			listAreas:Array
		},
		watch:{
			// 监听touchnum的变化
			touchnum:function(){
				if(this.touchnum){
					const element=this.$refs[this.touchnum][0]
					this.scroll.scrollToElement(element)
				}
			}
		},
		methods:{
			getVaule:function(litter){
				// 获取到传过来的值
				// console.log(litter.target.innerText)
				this.touchnum=litter.target.innerText
			},
			cityClick:function(city){
				// 在store中能够调用方法changeCity获取到传过去的值
				this.$store.dispatch('changeCity',city)
				// 点击以后跳转到首页
				this.$router.push('/')
			}
		},
		mounted:function(){
			this.scroll = new Bscroll(this.$refs.wrapper)
		}
	}
</script>

<style scoped="scoped">
	.wrapper{
		width: 100%;
		height: 0; 
		padding-bottom: 200%;
		/* y轴方向上 */
		overflow-y: hidden;
	}
	.city-area{
		width: 100%;
		overflow: hidden;
	}
	.city-area-h2{
		height: 0.86rem;
		line-height: 0.86rem;
		background-color: whitesmoke;
		padding-top: 0rem;
		padding-left: 0.2rem;
	}
	.hotcitylist-ul-li{
		float: left;
		width: 33.29%;
		height: 1rem;
		text-align: center;
		line-height: 1rem;
		border: 0.001rem solid whitesmoke ;
	}
	.hotcitynumsort{
		float: left;
		width: 19.95%;
		height: 1rem;
		text-align: center;
		line-height: 1rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space:nowrap;
		border: 0.001rem solid whitesmoke ;
	}
	.hotcitynumsort-content{
		float: left;
		width: 19.95%;
		height: 1rem;
		text-align: center;
		line-height: 1rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space:nowrap;
		/* border: 0.001rem solid whitesmoke ; */
	}
</style>
